postcss-less

What is postcss-less?

The postcss-less npm package is a tool that allows you to parse LESS syntax with PostCSS, enabling you to use PostCSS plugins with LESS files. It is a syntax plugin for PostCSS, a tool for transforming styles with JavaScript plugins.

What are postcss-less's main functionalities?

Parsing LESS Syntax

This feature allows you to parse LESS files using PostCSS by specifying the postcss-less syntax. This is useful for applying PostCSS plugins to LESS files.

const postcss = require('postcss');
const postcssLess = require('postcss-less');

postcss().process(lessCode, { syntax: postcssLess }).then(result => {
  console.log(result.css);
});

Stringifying LESS

This feature enables you to convert a PostCSS AST (Abstract Syntax Tree) back into a LESS string. This is useful when you want to generate LESS code after manipulating the AST.

const postcss = require('postcss');
const postcssLess = require('postcss-less');

const root = postcss.parse(lessCode, { syntax: postcssLess });
const less = root.toString(postcssLess);

Other packages similar to postcss-less

postcss-scss

This package is similar to postcss-less but is designed to work with SCSS syntax. It allows you to use PostCSS plugins with SCSS files.

postcss-sass

Similar to postcss-less, postcss-sass enables you to parse SASS syntax with PostCSS. It is another syntax plugin for PostCSS that targets SASS files instead of LESS.

postcss-styl

This package is a PostCSS syntax for parsing Stylus. Like postcss-less, it allows you to use PostCSS plugins with Stylus files, providing similar functionality for a different preprocessor language.

README

PostCSS LESS Syntax

PostCSS Syntax for parsing LESS

Please note: poscss-less is not a LESS compiler. For compiling LESS, please use the official toolset for LESS.

Getting Started

First thing's first, install the module:

npm install postcss-less --save-dev

LESS Transformations

The most common use of postcss-less is for applying PostCSS transformations directly to LESS source. eg. ia theme written in LESS which uses Autoprefixer to add appropriate vendor prefixes.

const syntax = require('postcss-less');
postcss(plugins)
  .process(lessText, { syntax: syntax })
  .then(function (result) {
    result.content // LESS with transformations
});

Inline Comments

Parsing of single-line comments in CSS is also supported.

:root {
    // Main theme color
    --color: red;
}

Note that you don't need a custom stringifier to handle the output; the default stringifier will automatically convert single line comments into block comments. If you need to support inline comments, please use a custom PostCSSLess stringifier.

Rule Node

PostCSS Rule Node

rule.empty

Determines whether or not a rule contains declarations.

Note: Previously ruleWithoutBody. This is a breaking change from v0.16.0 to v1.0.0.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].empty // => true for &:extend
root.first.nodes[1].empty // => true for calling of mixin

rule.extend

Determines whether or not a rule is nested.

Note: Previously extendRule. This is a breaking change from v0.16.0 to v1.0.0.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].extend // => true

rule.important

Determines whether or not a rule is marked as important.

Note: This is a breaking change from v0.16.0 to v1.0.0.

import postCssLess from 'postcss-less';
const less = `
    .class {
        .mixin !important;
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].important // => true
root.first.nodes[0].selector // => '.mixin'

rule.mixin

Determines whether or not a rule is a mixin.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        .mixin-name;
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].mixin // => true

rule.nodes

An Array of child nodes.

Note that nodes is undefined for rules that don't contain declarations.

import postCssLess from 'postcss-less';
const less = `
    .class2 {
        &:extend(.class1);
        .mixin-name(@param1, @param2);
    }
`;
const root = postCssLess.parse(less);

root.first.nodes[0].nodes // => undefined for &:extend
root.first.nodes[1].nodes // => undefined for mixin

Comment Node

PostCSS Comment Node

comment.inline

Determines whether or not a comment is inline.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.inline // => true

comment.block

Determines whether or not a comment is a block comment.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('/* Hello world */');

root.first.block // => true

comment.raws.begin

Precending characters of a comment node. eg. // or /*.

comment.raws.content

Raw content of the comment.

import postCssLess from 'postcss-less';

const root = postCssLess.parse('// Hello world');

root.first.raws.content // => '// Hello world'

Stringifying

To process LESS code without PostCSS transformations, custom stringifier should be provided.

import postcss from 'postcss';
import postcssLess from 'postcss-less';
import stringify from 'postcss-less/less-stringify';

const lessCode = `
    // Non-css comment

    .container {
        .mixin-1();
        .mixin-2;
        .mixin-3 (@width: 100px) {
            width: @width;
        }
    }

    .rotation(@deg:5deg){
      .transform(rotate(@deg));
    }
`;

postcss()
  .process(less, {
    syntax: postcssLess,
    stringifier: stringify
  })
  .then((result) => {
    console.log(result.content); // this will be value of `lessCode` without changing comments or mixins
});

Use Cases

• Lint LESS code with 3rd-party plugins.
• Apply PostCSS transformations (such as Autoprefixer) directly to the LESS source code

Contribution

Please, check our guidelines: CONTRIBUTING.md

Attribution

This module is based on the postcss-scss library.